<template>
  <div>
    <el-card shadow="false" class="box-card">
      <div slot="header" class="clearfix">
        <el-button @click="initMenu" type="warning">初始化菜单</el-button>
        <el-button type="primary" @click="addMenu">新增菜单</el-button>
      </div>
      <div class="text item">
        <el-table
          :data="tableData"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column prop="title" align="" width="150px" label="菜单名称">
          </el-table-column>
          <el-table-column prop="" width="100px" align="center" label="图标">
            <template slot-scope="scope">
              <i style="font-size: 30px" :class="scope.row.icon"></i>
            </template>
          </el-table-column>
          <el-table-column
            prop="level"
            width="100px"
            align="center"
            label="等级"
          >
          </el-table-column>
          <el-table-column
            prop="sort"
            width="100px"
            align="center"
            label="排序"
          >
          </el-table-column>
          <el-table-column
            prop="permissionValue"
            align="center"
            label="权限标识"
          >
            <template slot-scope="scope">
              <span>{{
                scope.row.permissionValue ? scope.row.permissionValue : "暂无"
              }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="path" align="center" label="路由">
          </el-table-column>
          <el-table-column prop="component" align="center" label="组建路径">
          </el-table-column>
          <el-table-column
            prop=""
            width="100px"
            align="center"
            label="是否可用"
          >
            <template slot-scope="scope">
              <el-tag :type="scope.row.status == 1 ? '' : 'danger'">{{
                scope.row.status == 1 ? "可用" : "不可用"
              }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间">
          </el-table-column>
          <el-table-column
            width="150px"
            prop="createTime"
            align="center"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button @click="edit(scope.row)" size="small" type="primary"
                >编辑</el-button
              >
              <el-button @click="del(scope.row.id)" size="small" type="danger"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
    <addMenu @tofather='getson' ref="son"></addMenu>
    <initMenu @tofather='getson' ref="son1"></initMenu>
  </div>
</template>

<script>
import menuApi from "@/api/authority/resource/index";
import addMenu from "@/components/authority/addMenu";
import initMenu from '@/components/authority/initMenu'
export default {
  components: { addMenu,initMenu },

  data() {
    return {
      tableData: [],
    };
  },

  created() {
    this.init();
  },

  mounted() {},

  methods: {
    getson(){
      this.init()
    },
    initMenu() {
      this.$refs.son1.cancle()
    },
    // 修改菜单某一项
    edit(item) {
      this.$refs.son.change(item);
    },
    // 删除菜单某一项
    del(id) {
      console.log(id);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        menuApi.remove(id).then((res) => {
          console.log(res);
          if (res.success) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.init();
          } else {
            this.$message.error(res.message);
          }
        });
      });
    },
    addMenu() {
      this.$refs.son.cancle();
    },
    init() {
      menuApi.findAllPermissions().then((res) => {
        console.log(res);
        this.tableData = res.data.menus;
      });
    },
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='scss'>
.box-card {
  width: 97%;
  margin: 15px auto;
}
</style>